<md-content class="md-padding">

  <div layout="column">

    <div layout="row">
      <span class="md-title"> Is Kylo Clustered</span>
      <div flex class="layout-padding-left">
        <ng-md-icon ng-if="vm.isClustered" icon="check_circle" class="healthy"></ng-md-icon>
        <ng-md-icon ng-if="!vm.isClustered" icon="do_not_disturb" class="warn"></ng-md-icon>
      </div>
    </div>
  </div>

  <div ng-if="vm.isClustered" class="layout-padding-top">

    <div ng-if="vm.members.length <=1" class="layout-padding-bottom" layout="column">
      <div layout="row" layout-align="start start">
            <span>
              <ng-md-icon icon="warning" class="warn"></ng-md-icon>
            </span>
        <span class="md-subhead layout-padding-left">Warning.  Only 1 member is found in the cluster. </span>
        <span flex/>
      </div>
      <span class="hint">Please ensure your Kylo cluster configuration is configured correctly.</span>
    </div>

    <div layout="column" class="layout-padding-top-bottom">
      <md-divider></md-divider>
      <span class="md-title layout-padding-top">Cluster Members</span>
      <div layout="column" ng-repeat="member in vm.members" class="layout-padding-top layout-padding-left">
        {{member}}
      </div>
    </div>

    <md-divider></md-divider>

    <div layout="column">
      <span class="md-title layout-padding-top">Send a Message</span>
      <div layout="row" class="layout-padding-top layout-padding-left">
        <md-input-container class="condensed">
          <label>Send a Message</label>
          <input ng-model="vm.simpleMessage" required>
        </md-input-container>
        <md-button ng-click="vm.sendMessage();" class="md-primary md-raised">Send</md-button>
      </div>
    </div>


    <md-divider></md-divider>
    <div layout="column">
      <span class="md-title layout-padding-top">Received Messages</span>
      <md-list layout-fill layout="column" class="list-item-table">
        <md-list-item ng-repeat="msg in vm.receivedMessages|orderBy:'-dateTime' ">
          <div layout="row" layout-fill>
            <div flex="60" layout="column" class="item-column md-list-item-text ">
              <span class="item-title">{{msg.message}}</span>
              <span class="column-title column-title-bottom">
                              Message
            </span>
            </div>

            <div layout="column" flex="20" class="item-column md-list-item-text ">
              <span class="item-title">{{msg.from}}</span>
              <span class="column-title column-title-bottom">
                              From
            </span>
            </div>
            <div layout="column" flex="20" class="item-column md-list-item-text ">
              <span class="item-title">{{msg.dateTime | date:'HH:mm:ss'}}</span>
              <span class="column-title column-title-bottom">
                              Date
            </span>
            </div>

          </div>
          <md-divider ng-if="!$last"></md-divider>
        </md-list-item>
        <md-list-item ng-if="vm.receivedMessages.length == 0">
          <div style="width:100%" class="item-column">
            <span class="item-title">No Messages received</span>
          </div>
        </md-list-item>
      </md-list>
    </div>
  </div>

  <div ng-if="!vm.isClustered" layout="column">
    <span>Kylo is not clustered.  Please follow the <a href="http://kylo.readthedocs.io/en/latest/how-to-guides/KyloClusterConfiguration.html" target="_blank">Clustering Kylo" documentation</a> and ensure the following items are configured.</span>
    <span class="hint">The default Kylo installation provides sample configuration files for the items below in the <i>'/opt/kylo/setup/config/kylo-cluster/'</i></span>

    <ul>
      <li>Modeshape jgroups configuration</li>
      <li>
        <ul>
          <li>Ensure the correct modeshape-jgroups xml exists in the <i>'/kylo-services/conf'</i> and is configured.</li>
          <li>Ensure the file above is configured and referenced in the metadata-repository.json file.</li>
        </ul>
      </li>
      <li>Kylo jgroups configuration</li>
      <li>
        <ul>
          <li>Ensure the kylo-cluster-jgroups-config.xml exists in the <i>'/kylo-services/conf'</i> and is configured.</li>
          <li>The property in the kylo-services/conf/application.properties exists referring to the file above:<br/>
            <pre>
                kylo.cluster.jgroupsConfigFile=kylo-cluster-jgroups-config.xml
              </pre>
          </li>
        </ul>
      </li>
      <li>Quartz Scheduler</li>
      <li>
        <ul>
          <li>Ensure the Quartz Scheduler is configured for cluster mode and the 'quartz.properties' file is in the <i>'/kylo-services/conf'</i></li>
        </ul>
      </li>
    </ul>
  </div>
</md-content>
